<template>
	<div class="sliderCommon" style="height: 100%;">
		<a-layout id="components-layout-demo-custom-trigger">
			<a-layout-header class="header" style="position:fixed;zIndex: 10;width:100%">
				<div class="logo">
					<span>
						<img src="../../assets/logo.png" alt="" width="30" style="position: relative;top:-4px">
						Star River
					</span>
					<a-button @click="returnPage">退出登录</a-button>
				</div>
			</a-layout-header>
			<a-layout style="margin-top: 64px;display: flex">
				<a-layout-sider :trigger="null" v-model="collapsed" collapsible style="zIndex: 1;width:100%">
					<div style="height: 100vh;overflow: auto">
						<a-menu mode="inline" theme="dark" :default-selected-keys="defaultSelectedKeys">
							<a-menu-item key="userManage">
								<router-link to="/userManage">
									用户管理
								</router-link>
							</a-menu-item>
							<a-menu-item key="bargainManage">
								<router-link to="/bargainManage">
									合同管理
								</router-link>
							</a-menu-item>
							<a-menu-item key="realNameConfirm">
								<router-link to="/realNameConfirm">
									认证审核
								</router-link>
							</a-menu-item>
							<a-menu-item key="withdrawalManage">
								<router-link to="/withdrawalManage">
									提现管理
								</router-link>
							</a-menu-item>
							<a-menu-item key="chargeManage">
								<router-link to="/chargeManage">
									资金明细
								</router-link>
							</a-menu-item>
							<a-menu-item key="hashrateMange">
								<router-link to="/hashrateMange">
									算力管理
								</router-link>
							</a-menu-item>
							<a-menu-item key="noticeManage">
								<router-link to="/noticeManage">
									工单管理
								</router-link>
							</a-menu-item>
							<a-menu-item key="promoteManage">
								<router-link to="/promoteManage">
									推广管理
								</router-link>
							</a-menu-item>
							<a-menu-item key="systemManage">
								<router-link to="/systemManage">
									系统配置
								</router-link>
							</a-menu-item>
						</a-menu>
					</div>
				</a-layout-sider>
				<a-layout>
					<a-layout-content
						:style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
						<slot></slot>
					</a-layout-content>
				</a-layout>
			</a-layout>
		</a-layout>
	</div>
</template>

<script>
	export default {
		name: 'sliderCommon',
		data() {
			return {
				collapsed: false,
				defaultSelectedKeys: [],
				isShow: false
			}
		},
		beforeMount() {
			this.defaultSelectedKeys = [this.$route.name.toString()]
		},
		mounted() {

		},
		methods: {
			returnPage() {
				this.$router.push('manageLogin')
			}
		}
	}
</script>

<style scoped lang="scss">
	.sliderCommon {
		.ant-layout-header {
			line-height: 36px;
		}

		.ant-divider-horizontal {
			margin: 0px;
		}

		.logo {
			padding: 15px 0px 10px 0px;
			text-align: left;

			span {
				margin-left: 10px;
				font-size: 20px;
				font-weight: 700;
				color: #ffffff;
			}

			.ant-btn {
				float: right;
				border-radius: 20px;
				color: #fff;
				background-color: transparent;
			}

			.ant-btn:nth-child(3) {
				border-color: transparent;
			}

			.ant-btn:nth-child(2) {
				margin-left: 20px;
				border-color: #27FFC7;
			}
		}

	}
</style>
